﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" href="css/comon0.css">
</head>
	<script>
	$(window).load(function(){  
             $(".loading").fadeOut()
            })  
			
/****/
$(document).ready(function(){
	var whei=$(window).width()
	$("html").css({fontSize:whei/20})
	$(window).resize(function(){
		var whei=$(window).width()
	 $("html").css({fontSize:whei/20})
});
	});
	</script>
	<script type="text/javascript" src="js/echarts.min.js"></script> 
	<script language="JavaScript" src="js/js.js"></script> 
<body>
<div class="canvas" style="opacity: .2">
	<iframe frameborder="0" src="js/index.html" style="width: 100%; height: 100%"></iframe>
	</div>
<div class="loading">
  <div class="loadbox"> <img src="picture/loading.gif"> 页面加载中... </div>
</div>
<div class="head">
  <h1>社区数据可视化</h1>
  <div class="weather"><img src="picture/weather.png"><span>多云转小雨</span><span id="showTime"></span></div>
	
	<script>
var t = null;
    t = setTimeout(time,1000);//開始运行
    function time()
    {
       clearTimeout(t);//清除定时器
       dt = new Date();
		var y=dt.getFullYear();
		var mt=dt.getMonth()+1;
		var day=dt.getDate();
       var h=dt.getHours();//获取时
       var m=dt.getMinutes();//获取分
       var s=dt.getSeconds();//获取秒
       document.getElementById("showTime").innerHTML = y+"年"+mt+"月"+day+"-"+h+"时"+m+"分"+s+"秒";
       t = setTimeout(time,1000); //设定定时器，循环运行     
    } 

</script>
	
	
</div>
<div class="mainbox">
  <ul class="clearfix">
    <li>
      <div class="boxall" style="height: 4.5rem">
        <div class="alltitle">湿度检测</div>
        <div class="allnav" id="echart1"></div>
        <div class="boxfoot"></div>
      </div>
      <div class="boxall" style="height: 4.5rem">
        <div class="alltitle">PM2.5</div>
        <div class="allnav" id="echart2"></div>
        <div class="boxfoot"></div>
      </div>
      <!--<div class="boxall" style="height: 3.2rem">
        <div style="height:100%; width: 100%;">
		  	<div class="sy" id="fb1"></div>
				<div class="sy" id="fb2"></div>
				<div class="sy" id="fb3"></div>
		  </div>
        <div class="boxfoot">
			
		  </div>
      </div>-->
    </li>
    <li>
      <div class="bar">
        <div class="barbox">
          <ul class="clearfix">
            <li class="pulll_left counter">12581189</li>
            <li class="pulll_left counter">3912410</li>
          </ul>
        </div>
        <div class="barbox2">
          <ul class="clearfix">
            <li class="pulll_left">社区进入人数 </li>
            <li class="pulll_left">社区出去人数</li>
          </ul>
        </div>
      </div>
      <div class="map">
<!--        <div class="map1"><img src="picture/lbx.png"></div>-->
<!--        <div class="map2"><img src="picture/jt.png"></div>-->
<!--        <div class="map3"><img src="picture/map.png"></div>-->
        <div class="map4" id="map_1"></div>
      </div>
    </li>
    <li>
          <div class="boxall" style="height:4.5rem">
        <div class="alltitle">湿度检测</div>
        <div class="allnav" id="echart4"></div>
        <div class="boxfoot"></div>
      </div>
      <div class="boxall" style="height: 4.5rem">
        <div class="alltitle">人流量</div>
        <div class="allnav" id="echart5"></div>
        <div class="boxfoot"></div>
      </div>
      <!--<div class="boxall" style="height: 3rem">
        <div class="alltitle">烟雾检测</div>
        <div class="allnav" id="echart6"></div>
        <div class="boxfoot"></div>-->
      </div>
    </li>
  </ul>
</div>
<div class="back"></div>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=cjLpL0uKDG2cBLPIavmAWexFOGq4soP4"></script>
<script type="text/javascript" src="js/china.js"></script> 
<!--<script type="text/javascript" src="js/area_echarts.js"></script> -->
<script>
  //中间的百度地图
  function baidumap(){
    // 百度地图API功能
    var map = new BMap.Map("map_1");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
      mapTypes:[
        BMAP_NORMAL_MAP,
        BMAP_HYBRID_MAP
      ]}));
    map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    // var pt = new BMap.Point(116.417, 39.909);
    // var myIcon = new BMap.Icon("image/school.png", new BMap.Size(57,91),{//设置图标偏移量
    //   anchor: new BMap.Size(20, 80),
    //   imageOffset: new BMap.Size(0-20, 0 - 50)
    // });
    // var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
    // map.addOverlay(marker2);              // 将标注添加到地图中

    map.setMapStyleV2({styleJson:mapStyleJson});
  }

  baidumap();
</script>
</body>
</html>
